import React, { useEffect, useState } from 'react'
import { Table, Space, Input } from 'antd';
import { Modal, Button } from 'antd';
import { shop, shopadd, shopexit, shopdel, shopsearch } from '../../api/index'

export default function Shoporder(props) {
    const [list, setList] = useState([])
    useEffect(() => {
        drugList()
    }, [])

    const drugList = async () => {
        let res = await shop()
        if (res.data.code === 200) {
            setList([...res.data.data])
        } else {
            props.history.push('/login')
            window.sessionStorage.clear()
        }
    }

    const drugdel = async (id) => {
        await shopdel({ id })
        drugList()
    }

    const { Search } = Input;
    const onSearch = async (value) => {
        let res = await shopsearch({ value })
        setList([...res.data.data])
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: id => <a>{id}</a>,
        },
        {
            title: '药名',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '药价/元',
            dataIndex: 'price',
            key: 'price',
        },

        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => { drugdel(record.id) }}>删除</a>
                    <a onClick={() => { drugset(record) }}>编辑</a>
                </Space>
            ),
        },
    ];


    const [isModalVisible, setIsModalVisible] = useState(false);
    const [show, setshow] = useState(false)
    const [title1, settitle1] = useState([])
    const [price1, setprice1] = useState([])
    const [id1, setid1] = useState([])

    const title = (e) => {
        settitle1(e.target.value)
    }
    const price = (e) => {
        setprice1(e.target.value)
    }


    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = async () => {
        if (show === true) {
            await shopexit({ id: id1, price: price1, title: title1 })
            drugList()
        } else if (show === false) {
            await shopadd({ id: id1, price: price1, title: title1 })
            drugList()
        }
        clear()
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        clear()
    };


    const drugset = (record) => {
        setIsModalVisible(true)
        setshow(true)
        settitle1(record.title)
        setprice1(record.price)
        setid1(record.id)
    }

    const clear = () => {
        setIsModalVisible(false)
        settitle1('')
        setprice1('')
        setid1(0)
    }

    const [page, setPage] = useState({
        total_count: 0, // 总页数
        page_no: 1, // 当前页码
        page_size: 7 // 每页数据条数
    });

    return (
        <div className='wrapper'>
            <div className="add">
                <Button type="primary" onClick={showModal}>
                    新建
                </Button>
                <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>标题:<input type="text" value={title1} onChange={(e) => { title(e) }} /></p>
                    <p>价格:<input type="text" value={price1} onChange={(e) => { price(e) }} /></p>
                </Modal>
            </div>
            <Search placeholder="请输入药名" onSearch={onSearch} style={{ width: 200 }} />
            <Table
                columns={columns}
                dataSource={list}
                pagination={{ // 具体配置可看antd官网文档Pagination的API部分
                    // position: ['bottomRight'],
                    // size: 'small',
                    // showQuickJumper: true,
                    // defaultCurrent: 1,
                    // total: page.total_count,
                    pageSize: page.page_size,
                    // current: page.page_no,
                    // showSizeChanger: true,
                    // showTotal: total => `共${total}条`,
                    // onChange: (pageNo, pageSize) => drugList(pageNo, pageSize)
                }}
            />
        </div>
    )
}
